<template>
  <div class="TestDatas">

    <data-set :setExperimentId="experimentId" @Cancel="setCancel" v-if="TestDataType==='set'">
    </data-set>
    <data-dispose :disposeExperimentId="experimentId" :disposeDataPartenrId="dataPartenrId" v-else-if="TestDataType==='dispose'" @Cancel="disposeCancel">
    </data-dispose>
    <div class="TestData_box" v-else>
      <div class="TestDataBox_top">
        <a-row :gutter="24" style="padding: 30px 20px;">
          <a-col :span="6">
            <a-form-item>
              <a-select v-model="queryParam.bid" placeholder="请选择申办方" default-value="0" style="min-width: 200px;">
                <a-select-option value="">全部</a-select-option>
                <a-select-option v-for="item in bidAndDataPartnerList.bids" :key="item.companyId" :value="item.companyId"> {{ item.companyName }} </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item>
              <a-select v-model="queryParam.dataPartner" placeholder="请选择数据合作方" default-value="0" style="min-width: 200px;">
                <a-select-option value="">全部</a-select-option>
                <a-select-option v-for="item in bidAndDataPartnerList.dataPartners" :key="item.companyId" :value="item.companyId">{{ item.companyName }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item>
              <a-select v-model="queryParam.status" placeholder="请选择试验状态" default-value="0" style="min-width: 230px;">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="1">编辑中</a-select-option>
                <a-select-option value="2">预发布</a-select-option>
                <a-select-option value="3">进行中</a-select-option>
                <a-select-option value="4">已结束</a-select-option>
                <a-select-option value="5">暂停</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </div>

      <div>
        <a-row :gutter="24">
          <a-col :span="8" class="TestData_box_item" v-for="(item,index) in testDataList" :key="index">
            <div class="TestData_box_item_box">
              <a-row class="item_top">
                <a-col :span="18">
                  <span class="item_top_left">试验全称：{{ item.experimentName }}</span>
                </a-col>
                <a-col :span="6" style="text-align: right;">
                  <a-badge class="item_top_status" :status="statusObj[item.status]" :text="statusNameObj[item.status]" />
                </a-col>
              </a-row>
              <a-row class="item_top2">
                <a-col :span="12">
                  <span>试验ID：{{ item.experimentNum }}</span>
                </a-col>
                <a-col :span="12" style="    text-align: right;">
                  <span>试验版本：{{ item.versions }}</span>
                </a-col>
              </a-row>
              <a-row class="item_baseInfo">
                <a-col :span="20">
                  <div class="item_baseInfo_data">
                    <span>申办方</span>
                    <div class="item_baseInfo_data_item">
                      <i>{{ item.bidName }}</i>
                    </div>
                  </div>
                  <div class="item_baseInfo_data">
                    <span>数据合作方</span>
                    <div class="item_baseInfo_data_item">
                      <i>{{ item.dataPartnerName }}</i><br>
                      <!-- <i>锦山国际人参药草硏究所</i><br> -->
                    </div>
                  </div>
                </a-col>
                <a-col :span="4">
                  <div class="item_baseInfo_map">
                    <a-progress type="circle" :percent="Number(item.screenRate)" :strokeWidth="15" strokeColor="#56ced1" :width="60" />
                    <!-- item.screenRate -->
                  </div>
                </a-col>
              </a-row>
              <a-row style="background: #f9f9f9;margin: 0 -23px;padding-left: 23px;">
                <a-col :span="24" class="item_sum">
                  <span>试验总人数：{{ item.experimentUserCount }}人</span>
                </a-col>
              </a-row>
              <a-row type="flex" justify="center" class="item_info">
                <a-col :span="4">
                  <a-badge status="default" text="未开启" />
                  <p>{{ item.notBeginUserCount }}</p>
                </a-col>
                <a-col :span="4">
                  <a-badge status="processing" text="进行中" />
                  <p>{{ item.underwayUserCount }}</p>
                </a-col>
                <a-col :span="4">
                  <a-badge status="success" text="完成" />
                  <p>{{ item.finishUserCount }}</p>
                </a-col>
                <a-col :span="4">
                  <a-badge status="warning" text="主动退出" />
                  <p>{{ item.quitUserCount }}</p>
                </a-col>
                <a-col :span="4">
                  <a-badge status="error" text="不合格" />
                  <p>{{ item.disqualificationUserCount }}</p>
                </a-col>
              </a-row>
              <a-row :gutter="12" class="item_font">
                <div v-if="operationPermission['detail'] && operationPermission['setting']">
                  <a-col :span="12" @click="testDataSetEvent(item.experimentId)">
                    设置
                  </a-col>
                  <a-col :span="12" class="item_font_right" @click="testDataDisposeEvent(item)">
                    查看数据
                  </a-col>
                </div>
                <div v-else>
                  <a-col :span="24" class="item_font_right" @click="testDataDisposeEvent(item)">
                    查看数据
                  </a-col>
                </div>
              </a-row>

            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>

import DataDispose from './modules/TestDataDispose'
import DataSet from './modules/TestDataSet'

import { getTestDataList, getCreatFormBidAndDataPartner } from '@/api/experiment'
export default {
  name: 'TableList',
  components: {
    DataDispose,
    DataSet
  },
  data () {
    return {
      operationPermission:{},
      TestDataType: '',
      queryParam: {
        'pageNumber': 1,
        'pageSize': 20
      },
      bidAndDataPartnerList: {},
      testDataList: [],
      statusObj: {
        // '1': "预发布",  //
        // '2': "进行中",  //
        '3': 'processing', // 进行中
        '4': 'warning', // 已结束
        '5': 'error' // 已暂停
      },
      statusNameObj: {
        // '1': "预发布",  //
        // '2': "进行中",  //
        '3': '进行中', //
        '4': '已结束', //
        '5': '已暂停' //
      }
    }
  },
  methods: {
    setCancel () {
      this.TestDataType = ''
      this.queryBidAndDataPartner()
    },
    disposeCancel () {
      this.TestDataType = ''
      this.queryBidAndDataPartner()
    },

    queryTestDataList () {
      getTestDataList(this.queryParam).then(res => {
        this.testDataList = res.data.list
      })
    },
    queryBidAndDataPartner () {
      getCreatFormBidAndDataPartner().then(res => {
        this.bidAndDataPartnerList = res.data
      })
    },
    testDataDisposeEvent (v) {
      if (v.cannotClick) {
         this.$message.error('请先设置实验数据')
      }else{
        this.experimentId = v.experimentId
        this.dataPartenrId = v.dataPartner
        this.TestDataType = 'dispose'

      }
    },
    testDataSetEvent (v) {
      this.experimentId = v
      this.TestDataType = 'set'
    }
  },

  mounted () {
    this.queryTestDataList()
    this.queryBidAndDataPartner()
  },
  created () {
    let list = JSON.parse(localStorage.getItem("operationPermission"))
    list.forEach(element => {
      if (element.permissionId == 'experimentData') { 
        element.actionVOS.forEach(i => {
          this.operationPermission[i.action] = i.defaultCheck
        });
      }      
    });
   },

  watch: {
    queryParam: {
      handler () {
        this.queryTestDataList()
      },
      deep: true
    }
  }
}
</script>

<style lang="less">
.TestDatas {
  // padding: 24px 32px;
  // overflow: hidden;
}
.TestDataBox_top {
  background: #ffffff;
  height: 100px;
  width: 100%;
  .ant-select-selection {
    background: rgba(249, 249, 249, 1);
  }
}

.TestData_box_item {
  overflow: hidden;
  margin-top: 20px;
  width: 33.33%;
  margin-bottom: 20px;
  .TestData_box_item_box {
    overflow: hidden;
    border-radius: 2px;
    width: 100%;
    background: #ffffff;
    padding: 15px 15px 0 15px;
    // margin: 0 10px;
    .item_top {
      .item_top_left {
        font-size: 13px;
        font-family: PingFangSC-Medium, Microsoft Yahei, sans-serif;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        padding-left: 8px;
        background: linear-gradient(to right, #56ced1 0%, #56ced1 3px, #fff 3px, #fff 100%);
      }
      .item_top_status {
        font-size: 13px;
        font-family: PingFang-SC-Bold, Microsoft Yahei, sans-serif;
        font-weight: bold;
        color: rgba(74, 74, 74, 1);
      }
    }
    .item_top2 {
      margin-top: 6px;
      margin-bottom: 20px;
      span {
        font-size: 12px;
        font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.45);
      }
    }
    .item_sum {
      background: #f9f9f9;
      margin-top: 20px;
      margin-bottom: 20px;
      font-size: 14px;
      font-family: PingFangSC-Medium, Microsoft Yahei, sans-serif;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      padding-left: 8px;
      background: linear-gradient(to right, #56ced1 0%, #56ced1 3px, #f9f9f9 3px, #f9f9f9 100%);
    }
    .item_baseInfo {
      margin-bottom: 10px;
      .item_baseInfo_map {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .item_baseInfo_data {
        height: 40px;
        span {
          // margin-right: 15px;
          height: 35px;
          line-height: 35px;
          float: left;
          width: 25%;
          font-size: 12px;
          font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
          font-weight: 400;
          color: rgba(140, 140, 140, 1);
        }
        .item_baseInfo_data_item {
          display: inline-block;
          position: absolute;
          i {
            display: inline-block;
            height: 25px;
            line-height: 25px;
            padding: 0 5px;
            background: rgba(249, 249, 249, 1);
            border-radius: 4px;
            font-style: normal;
            font-size: 12px;
            font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
            font-weight: 400;
            color: rgba(140, 140, 140, 1);
            margin: 5px 0;
            // width: 80%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
    .item_info {
      background: #f9f9f9;
      width: 125%;
      margin-left: -11%;
      text-align: center;
      font-size: 13px;
      font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.45);
      span {
        font-size: 12px;
        font-family: PingFangSC-Medium, Microsoft Yahei, sans-serif;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      p {
        font-size: 20px;
        font-family: PingFang-SC-Bold, Microsoft Yahei, sans-serif;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.85);
      }
    }
    .item_font {
      cursor: pointer;
      text-align: center;
      margin: 0 -23px !important;
      height: 45px;
      line-height: 45px;
      font-size: 16px;
      font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
      font-weight: 400;
      color: rgba(37, 37, 37, 1);
      background: rgba(239, 239, 239, 1);
      .item_font_right {
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        padding-right: 23px;
        color: rgba(255, 255, 255, 1);
        background: #56ced1;
      }
    }
  }
}
</style>
